<template>
  <div id="container">
    <div id="siderbar">
      <span @mousedown="dragRow">Row</span>
      <span @mousedown="dragCol">Col</span>
      <span @mousedown="dragButton">Button</span>
    </div>
    <div id="editpanel" data-accept-type="row">
      <div class="row" data-accept-type="col" v-bind:data-row="i" v-for="row,i of rows" v-bind:key="row">
        <div class="col" data-accept-type="btn" v-bind:data-col="j" v-for="col,j of row.cols" v-bind:key="col">
          <button v-for="ele of col.children" v-bind:key="ele">{{ele.content}}</button>
        </div>
      </div>

    </div>
    <div id="dragable" :style="{left:drag.x + 'px', top:drag.y + 'px'}" v-if="drag.isDragging">{{drag.type}}</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data: () => ({
    drag: {
      x0:0,
      y0:0,
      dx:0,
      dy:0,
      x:0,
      y:0,
      type:"none",
      isDragging:false
    },
    rows:[
      {
        cols:[
          {
            children:[
              {
                type:"btn",
                content:"按钮"
              }
            ]
          },
        ]
      }
    ]
  }),
  components: {
  },
  methods:{
    dragActon(type){
      this.drag.type = type
      this.drag.isDragging = true;
      let move = (e) => {
        this.drag.x = e.clientX + 10;
        this.drag.y = e.clientY + 10;
      }

      let up = (e) => {
        document.removeEventListener("mousemove",move);
        document.removeEventListener("mouseup",up);
        this.drag.isDragging = false;
        let areaElement = document.elementFromPoint(e.clientX,e.clientY);
        let current = areaElement;
        // let a = current.dataset["acceptType"]
        console.log(current)
        // while(current && a != "type"){
        //   current = current.parentNode;
        // }
        if(type == "row"){
          this.rows.push({cols:[]});
        }
        if(type == "col"){
          // console.log(current);
          this.rows[current.dataset["row"]].cols.push({children:[]})
        }
        if(type == "btn"){
          // this.rows[current.parentNode.dataset["row"]]
          // .cols[current.dataset["col"]].push({content:"btn"});
          this.rows[current.parentNode.dataset["row"]]
          .cols[current.dataset["col"]].children.push({content:"btn"});
        }
      }
      document.addEventListener("mousemove",move);
      document.addEventListener("mouseup",up);
    },
    dragRow(){
      this.dragActon("row")
    },
    dragCol(){
      this.dragActon("col")
    },
    dragButton(){
      this.dragActon("btn")
    }
  }
}
</script>

<style>
#container{
  font-family:Arial, Helvetica, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing:border-box;
  position: absolute;
}

#siderbar{
  width: 160px;
  background-color: #eeeeee;
}

#siderbar > *{
  width: 60px;
  height: 60px;
  display: inline-block;
  margin: 10px;
  box-sizing: border-box;
  border: solid 1px black;
  user-select: none;
}
#editpanel{
  flex: 1;
  
}

#dragable{
  box-sizing: border-box;
  position: absolute;
  width: 60px;
  height: 60px;
  border: solid 1px black;
}

.row{
  width: 100%;
  min-height: 300px;
  background-color: rgb(179, 201, 211);
  display: flex;
  padding: 20px;
  box-sizing: border-box;
}
.col{
  height: 100px;
  background-color: rgb(128, 212, 251);
  min-width: 200px;
  margin: 10px;
}
</style>
